<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Info</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/animate.min.css">
  <link rel="stylesheet" href="./js/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./js/bootstrap/css/icons/bootstrap-icons.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/info.css">
  <script src="./js/jquery.min.js"></script>
  <script src="./js/bootstrap/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <header class="animate__animated animate__fadeInDown">
    <div class="header-main container">
      <a href="index.html" class="logo">
        <img src="./resoures/images/logo.png" alt="logo">
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li class="active"><a href="#">Info</a></li>
        </ul>
      </nav>
      <div class="dropdown">
        <div class="lang" href="#" data-toggle="dropdown" aria-expanded="false">
          <i class="bi bi-globe-asia-australia"></i>
        </div>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">简体中文</a>
          <a class="dropdown-item" href="#">English</a>
        </div>
      </div>
    </div>
  </header>
  <div class="banner-container">
    <div class="banner container container">
      <div class="text-info animate__animated animate__zoomInDown">
        <h2>Make The Easiest Solution For You</h2>
        <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat
          <br> quisque eget congue velit in cursus leo Sed sodales
        </p>
      </div>
      <div class="wow animate__animated animate__zoomInRight">
        <img src="./resoures/images/banner.png" alt="">
      </div>
    </div>
  </div>
  <div class="bg-container">
    <div class="bg-list">
      <div class="wow animate__animated animate__fadeInLeft">
        <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat</p>
        <div class="btn-box">
          <div class="btn-one">button</div>
        </div>
      </div>
      <div class="wow animate__animated animate__fadeInRight">
        <p>Consectetur adipiscing elit Aenean scelerisque at augue vitae consequat</p>
        <div class="btn-box">
          <div class="btn-one">button</div>
        </div>
      </div>
    </div>
  </div>
  <div class="product-info">
    <div class="info-box container">
      <div class="collapse-box">
        <div class="collapse-target" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false"
          aria-controls="collapse1">
          <h2>Some placeholder content for the collapse component</h2>
          <span><i class="bi bi-chevron-down"></i></span>
        </div>
        <div class="collapse" id="collapse1">
          <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
            user activates the relevant trigger.
          </div>
        </div>
      </div>
      <div class="collapse-box">
        <div class="collapse-target" data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false"
          aria-controls="collapse2">
          <h2>Some placeholder content for the collapse component</h2>
          <span><i class="bi bi-chevron-down"></i></span>
        </div>
        <div class="collapse" id="collapse2">
          <div class="card card-body">
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the
            user activates the relevant trigger.
          </div>
        </div>
      </div>
    </div>
  </div>
  <footer>
    <div class="footer-container container">
      <div class="logo">
        <a href="index.html" class="wow animate__animated animate__fadeInLeftBig">
          <img src="./resoures/images/logo.png" alt="logo">
        </a>
      </div>
      <ul class="wow animate__animated animate__fadeInLeftBig">
        <li>
          <h2>title</h2>
          <p>text</p>
          <p>text</p>
          <p>text</p>
        </li>
        <li>
          <h2>title</h2>
          <p>text</p>
          <p>text</p>
          <p>text</p>
        </li>
      </ul>
      <div class="brand-logo wow animate__animated animate__backInUp">
        <a href="#">
          <img src="./resoures/images/tuite.png" alt="">
        </a>
        <a href="#">
          <img src="./resoures/images/tuite.png" alt="">
        </a>
        <a href="#">
          <img src="./resoures/images/tuite.png" alt="">
        </a>
      </div>
    </div>

  </footer>
  <script src="./js/wow.min.js"></script>
  <script>
    new WOW().init();
  </script>
</body>

</html>